<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="div-class"></div>
  <button id="add">add</button>
  <button id="remove">remove</button>
  <button id="toggle">toggle</button>

  <script>
    const elem = document.querySelector('div')

    function add() {
      // add
      elem.classList.add('div-class3')
    }

    function remove() {
      // remove
      elem.classList.remove('div-class3')
    }

    function toggle() {
      // toggle
      elem.classList.toggle('div-class3')
    }

    document.querySelector('#add').addEventListener('click', add)
    document.querySelector('#remove').addEventListener('click', remove)
    document.querySelector('#toggle').addEventListener('click', toggle)
  </script>
</body>

</html>